<template>
	<view class="container">
		<view class="mp-search-box">
			<view class="locate" @click="$navTo('../shoplist/regionlist?city='+oldCity)">
				<text>{{city}}</text>
				<text class="yticon icon-you"></text>
			</view>
			<view class="search" @click="$navTo('/pages/product/searchstat')">
				<icon type="search" size="20" />
				<text>搜索产品或门店</text>
			</view>
			<text class="yticon icon-saomiao" @click="scancode"></text>
		</view>

		<view class="body">
			<jhome1 v-if="homes" ref="Jhomes"></jhome1>
		</view>

		<image class="home_kefu" @click="kefu" src="../../static/Home_Icon/kefu.png" mode=""></image>

	</view>
</template>
<script>
	import Jhome1 from '@/components-home/pages/Jhome1.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['Location', ''])
		},
		components: {
			Jhome1
		},
		data() {
			return {
				homes: true,
				oldCity: '',
				city: '',
			};
		},
		async onLoad(options) {
			let mid = '';
			if (options.mid) {
				mid = options.mid;
			}
			if (options.scene) {
				mid = options.scene;
			}
			uni.setStorageSync('mid', mid);
			this.getCity();
			uni.$on('cityChange', res => {
				this.city = res.city;
				this.$store.commit('upcity', this.city);
				this.$refs.Jhomes.$refs.skill.page = 0;
				this.$refs.Jhomes.$refs.skill.list = [];
				this.$refs.Jhomes.$refs.skill.getList();
			})
		},
		onTabItemTap(e) {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 3
			})
		},
		onReachBottom() {
			uni.$emit('GetList');
		},
		onPageScroll() {
			uni.$emit('Scroll');
		},
		methods: {
			getCity() {
				this.$axios('o2o/getCurCity', 'POST', 'shop', this.Location).then(res => {
					if (res.data.code == 200) {
						this.city = res.data.data;
						this.oldCity = res.data.data;
						this.$store.commit('upcity', this.city);
						this.$refs.Jhomes.$refs.skill.getList();
					}
				})
			},
			kefu() {
				let that = this;
				wx.openCustomerServiceChat({
					extInfo: {
						url: 'https://work.weixin.qq.com/kfid/kfc85558bf452926a1b',
					},
					corpId: 'ww818270697fafba52',
					fail(res) {
						that.$api.msg('打开失败请重试！');
					}
				})
			},
			scancode() {
				let that = this;
				uni.scanCode({
					success: function(res) {
						let url = res.result;
						if (res.result.indexOf('https://h5.jinghushi.com/orderpay') != -1) {
							url = url.replace('https://h5.jinghushi.com/orderpay', '/pages/business/accounts');
						}
						that.$navTo(url);
					},
					fail(error) {
						that.$api.msg('扫码失败')
					}
				})
			}
		},
	}
</script>
<style lang="scss">
	.h1_jcvideo_msg {
		position: fixed;
		top: 290px;
		right: 0;
		margin-right: 10px;
		opacity: 0;
		transition: opacity 1s linear;
	}

	.h1_jcvideo_msg_SH {
		opacity: 1
	}

	@font-face {
		font-family: iconfont;
		font-weight: normal;
		font-style: normal;
		src: url('../../static/iconfont.ttf') format('truetype');
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icon-kefu2:before {
		content: "\e769";
	}

	.icon-kefu {
		font-size: 30upx;
		color: #303133;
	}

	.wp-hkefu {
		position: fixed;
		top: 20upx;
		left: 8upx;
		background-color: #fff;
		width: 44upx;
		z-index: 1000;
	}

	.mp-search-box {
		background: $bg-color;
		color: #fff;
		position: fixed;
		left: 0;
		top: 0;
		padding: calc(var(--status-bar-height) + 35upx) 20upx 10upx;
		display: flex;
		align-items: center;
		width: 100%;
		z-index: 999;

		.locate {
			font-size: 30upx;

			.icon-you {
				display: inline-block;
				transform: rotateZ(90deg);
			}
		}

		.search {
			background: #FFFFFF;
			border-radius: 40px;
			color: #909399;
			display: flex;
			align-items: center;
			font-size: 28upx;
			height: 55upx;
			margin: 0 10upx;
			padding: 0 10upx;
			width: 320upx;

			text {
				margin-left: 10upx;
			}
		}

		.icon-saomiao {
			font-size: 50upx;
		}
	}

	.body {
		position: relative;
		padding-top: calc(var(--status-bar-height) + 90upx);
		z-index: 100;
	}

	.home_kefu {
		position: fixed;
		border-radius: 50%;
		bottom: 180upx;
		height: 90upx;
		width: 90upx;
		right: 40upx;
		z-index: 100;
	}

	.home_kefu image {
		height: 90upx;
		width: 90upx;
	}
</style>